<template>
  <Navbar2></Navbar2>
  <a-layout-content style="padding: 70px 50px">
    <BreadCrumbShow :navgation-index="5"></BreadCrumbShow>
    <div :style="{ background: '#fff', padding: '24px', minHeight: '880px' }">
      <a-layout>
        <a-row>
          <a-col :span="14">
            <PgHeader page-title="Detail"></PgHeader>
            <a-layout-content class="contentStyle">
              <div class="col-md-12">
                <form class="card">
                  <div class="card-header">
                    <h3 class="card-title">{{ this.issue.subject }}</h3>
                  </div>
                  <div class="card-body">
                    <div class="mb-3">
                      <label class="form-label required">Issue remark</label>
                      <div>
                        <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email"
                               :value="issue.remark">
                        <!--                          <small class="form-hint">We'll never share your email with anyone else.</small>-->
                      </div>
                    </div>
                    <!--                      <div class="mb-3">-->
                    <!--                        <label class="form-label required">Password</label>-->
                    <!--                        <div>-->
                    <!--                          <input type="password" class="form-control" placeholder="Password">-->
                    <!--                          <small class="form-hint">-->
                    <!--                            Your password must be 8-20 characters long, contain letters and numbers, and must not contain-->
                    <!--                            spaces, special characters, or emoji.-->
                    <!--                          </small>-->
                    <!--                        </div>-->
                    <!--                      </div>-->
                    <div class="mb-3">
                      <label class="form-label">状态变更</label>
                      <div>
                        <a-select v-model:value="this.issueStatusStr" style="width: 200px" @change="this.statusChange">
                          <a-select-opt-group>
                            <template #label>
                            <span>
                              <WarningOutlined />
                              Todo
                            </span>
                            </template>
                            <a-select-option value="1">新建</a-select-option>
                            <a-select-option value="2">处理中</a-select-option>
                            <a-select-option value="3">重新打开</a-select-option>
                            <a-select-option value="4">待反馈</a-select-option>
                          </a-select-opt-group>
                          <a-select-opt-group>
                            <template #label>
                            <span>
                              <IssuesCloseOutlined />
                              Done
                            </span>
                            </template>
                            <a-select-option value="5">已解决</a-select-option>
                            <a-select-option value="6">已忽略</a-select-option>
                            <a-select-option value="7">已关闭</a-select-option>
                          </a-select-opt-group>
                        </a-select>
                      </div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label">Checkboxes</label>
                      <div>
                        <label class="form-check">
                          <input class="form-check-input" type="checkbox" checked>
                          <span class="form-check-label">Option 1</span>
                        </label>
                        <label class="form-check">
                          <input class="form-check-input" type="checkbox">
                          <span class="form-check-label">Option 2</span>
                        </label>
                        <label class="form-check">
                          <input class="form-check-input" type="checkbox" disabled>
                          <span class="form-check-label">Option 3</span>
                        </label>
                      </div>
                    </div>
                  </div>
<!--                  <div class="card-footer text-end">-->
<!--                    <button type="submit" class="btn btn-primary">Submit</button>-->
<!--                  </div>-->
                </form>
              </div>

            </a-layout-content>

          </a-col>
          <a-col :span="10" style="float: right">
            <PgHeader page-title="Comments"></PgHeader>
            <!--            <a-layout-header class="headerStyle">Header</a-layout-header>-->
            <a-layout-content class="contentStyle">
              <div class="col-md-12">
                <form class="card">
                  <div class="card-header">
                    <h3 class="card-title">Horizontal form</h3>
                  </div>
                  <div class="card-body">
                    <div class="mb-3 row">
                      <label class="col-3 col-form-label required">issue remark</label>
                      <div class="col">
                        <input type="email" class="form-control" aria-describedby="emailHelp" placeholder="Enter email"
                               :value="issue.remark">
                        <small class="form-hint">We'll never share your email with anyone else.</small>
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label class="col-3 col-form-label required">Password</label>
                      <div class="col">
                        <input type="password" class="form-control" placeholder="Password">
                        <small class="form-hint">
                          Your password must be 8-20 characters long, contain letters and numbers, and must not contain
                          spaces, special characters, or emoji.
                        </small>
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label class="col-3 col-form-label">Select</label>
                      <div class="col">
                        <select class="form-select">
                          <option>Option 1</option>
                          <optgroup label="Optgroup 1">
                            <option>Option 1</option>
                            <option>Option 2</option>
                          </optgroup>
                          <option>Option 2</option>
                          <optgroup label="Optgroup 2">
                            <option>Option 1</option>
                            <option>Option 2</option>
                          </optgroup>
                          <optgroup label="Optgroup 3">
                            <option>Option 1</option>
                            <option>Option 2</option>
                          </optgroup>
                          <option>Option 3</option>
                          <option>Option 4</option>
                        </select>
                      </div>
                    </div>
<!--                    <div class="row">-->
<!--                      <label class="col-3 col-form-label pt-0">Checkboxes</label>-->
<!--                      <div class="col">-->
<!--                        <label class="form-check">-->
<!--                          <input class="form-check-input" type="checkbox" checked>-->
<!--                          <span class="form-check-label">Option 1</span>-->
<!--                        </label>-->
<!--                        <label class="form-check">-->
<!--                          <input class="form-check-input" type="checkbox">-->
<!--                          <span class="form-check-label">Option 2</span>-->
<!--                        </label>-->
<!--                        <label class="form-check">-->
<!--                          <input class="form-check-input" type="checkbox" disabled>-->
<!--                          <span class="form-check-label">Option 3</span>-->
<!--                        </label>-->
<!--                      </div>-->
<!--                    </div>-->
                  </div>
                  <div class="card-footer text-end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </div>
                </form>
              </div>
            </a-layout-content>
          </a-col>
        </a-row>


        <!--        &lt;!&ndash;        <a-layout-footer class="footerStyle">Footer</a-layout-footer>&ndash;&gt;-->
      </a-layout>

    </div>
  </a-layout-content>
</template>

<script>
import {mapActions} from "vuex";
import Navbar2 from "@/views/components/Navbar2.vue";
import BreadCrumbShow from "@/views/components/BreadCrumbShow.vue";
import PgHeader from "@/views/components/PgHeader.vue";
import {getIssueByPk, modifyIssue} from "@/api/issues.js";
import {swtichStatusText} from "@/utils/project_core.js";

export default {
  name: "IssueDetail",
  components: {PgHeader, BreadCrumbShow, Navbar2},
  data() {
    return {
      issue: {
        id:null,
        subject: '',
        remark: '',
        status: 0
      },
      issueStatusStr:'',
    }
  },
  methods: {
    swtichStatusText,
    ...mapActions([
      'navigationChange',
      'issueChange'
    ]),
    async getIssue(pk) {
      let result = await getIssueByPk(pk)
      console.log('issue detail result:', result)
      if (result.data.code == 200) {
        this.issue = result.data.data
        this.issueStatusStr=this.swtichStatusText(result.data.data.status)
      }
      // this.issueChange(this.$route.query.pk)
    },
    async statusChange(evt) {
      let oldStatus = this.issue.status
      console.log('evt:', evt)
      let result = await modifyIssue({id: this.issue.id, status: evt});
      console.log('status change api result:', result)
      if(result.data.code==200 && result.data.data){
          layer.msg('modified issue status o-k')
      }else{
        layer.msg('modified issue status failed')
        this.issueStatusStr = this.swtichStatusText(oldStatus)
      }
    }
  },
  computed() {

  },
  created() {
    this.navigationChange('5')

    // this.issueChange(this.$route.query.pk)
  },
  mounted() {
    this.getIssue(this.$route.query.pk)

  },
  watch: {
    issue: function (val) {
      console.log('watch issue change: ', val)
      if (val) {
        this.data = val
      }
    }
  },
  issueStatusStr:function (val) {
    console.log('watch issueStatusStr change: ', val)
    if (val) {
      this.data = val
    }
  }
}
</script>

<style scoped>

</style>
